<template>
    <!--系统公共部分顶部-->
    <el-card>
        <div style="float: left;font-size: 30px;font-weight: bold">
            医疗管理系统
        </div>
        <div style="float: right;margin-right: 15px">
            <el-dropdown>
    <span style="font-size: 15px;">
      {{userAccount}}<el-icon class="el-icon--right"><ArrowDown /></el-icon>
    </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="switchIsShow(true,'个人信息','msg')">个人信息</el-dropdown-item>
                        <el-dropdown-item @click="switchIsShow(true,'修改密码','password')">修改密码</el-dropdown-item>
                        <el-dropdown-item @click="loginOut">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>

        </div>
        <div style="clear: both"></div>
    </el-card>
    <UserMsg :is-show="isShow" :title="title" @close="switchIsShow" :state="state" />
</template>

<script>
    import UserMsg from "@/components/Public/UserMsg";
    import { ArrowDown } from '@element-plus/icons-vue'
    import utils from "@/Utils";
    export default {
        name: "HeaderPublic",
        components:{
            ArrowDown,
            UserMsg
        },
        data(){
            return{
                isShow:false,
                title:'',
                state:'',
                userAccount:'',
                utils
            }
        },
        methods:{
            switchIsShow:function(result,title,state){
                this.isShow=result
                this.title=title
                this.state=state
            },
            LoadUserAccount:async function () {
                await this.axios.get("/User/isLogin/loginMsg").then((req)=>{
                    const data=req.data;
                    if (data.code>0){
                        this.utils.tipsMessage(data.error,data.code);
                        return
                    }
                    this.userAccount=data.data.userAccount;

                })
            },
            loginOut:function () {
                this.$confirm("请确认是否需要退出登录", "退出登录", {
                    type:'type',
                    showCancelButton:false
                }).then(()=>{
                    this.axios.get("/User/isLogin/loginOut").then((req)=>{
                        const data=req.data;
                        this.utils.tipsMessage(data.data,data.code);
                        this.$router.go(0)
                    })
                })

            }
        },
        mounted(){
            this.LoadUserAccount()
        }
    }
</script>

<style scoped>
    .el-card /deep/.el-card__body{
        padding: 10px;
    }
    .el-dropdown{
        margin-top: 10px;
    }

</style>